<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-06-14 17:55:59
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-09-21 15:28:16
 * @Description:
 *
-->

<template>
  <div class="diagnose-detail-ctn">
    <el-row :style="{ width: ctnWidth }" class="top" type="flex" align="middle">
      <span class="name">云商类型</span>
      <el-select
        v-model="cloudVendor"
        placeholder="请选择"
        size="small"
        style="
          flex-shrink: 0;
          width: 100px;
          margin-left: 10px;
          margin-right: 20px;
        "
        :loading="cloudVendorLoading"
        @change="cloudVendorChange"
      >
        <el-option
          v-for="(item, index) in cloudVendorOptions"
          :key="index"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <span class="name">区域</span>
      <el-select
        v-model="regionId"
        placeholder="请选择"
        size="small"
        style="
          flex-shrink: 0;
          width: 100px;
          margin-left: 10px;
          margin-right: 20px;
        "
        filterable
        remote
        :remote-method="regionIdRemoteQuery"
        :loading="regionIdLoading"
        @change="regionIdChange"
      >
        <el-option
          v-for="(item, index) in regionIdOptions"
          :key="index"
          :label="item.regionId"
          :value="item.regionId"
        />
      </el-select>
      <span class="name">可用区</span>
      <el-select
        v-model="zoneId"
        placeholder="请选择"
        size="small"
        style="
          flex-shrink: 0;
          width: 100px;
          margin-left: 10px;
          margin-right: 20px;
        "
        filterable
        remote
        :remote-method="zoneIdRemoteQuery"
        :loading="zoneIdLoading"
        @change="zoneIdChange"
      >
        <el-option
          v-for="(item, index) in zoneIdOptions"
          :key="index"
          :label="item.zoneId"
          :value="item.zoneId"
        />
      </el-select>
      <span class="name">集群名称</span>
      <el-select
        v-model="clusterName"
        placeholder="请选择"
        size="small"
        style="
          flex-shrink: 0;
          width: 100px;
          margin-left: 10px;
          margin-right: 20px;
        "
        filterable
        remote
        :remote-method="clusterNameRemoteQuery"
        :loading="clusterNameLoading"
        @change="clusterNameChange"
      >
        <el-option
          v-for="(item, index) in clusterNameOptions"
          :key="index"
          :label="item.k8sClusterName"
          :value="item.k8sClusterName"
        />
      </el-select>
      <span class="name">微服务名称</span>
      <el-select
        v-model="microSvcName"
        placeholder="请选择"
        size="small"
        style="
          flex-shrink: 0;
          width: 100px;
          margin-left: 10px;
          margin-right: 20px;
        "
        filterable
        remote
        :remote-method="microSvcNameRemoteQuery"
        :loading="microSvcNameLoading"
        @change="microSvcNameChange"
      >
        <el-option
          v-for="(item, index) in microSvcNameOptions"
          :key="index"
          :label="item.microServiceName"
          :value="item.microServiceName"
        />
      </el-select>
      <el-button
        size="small"
        type="primary"
        :loading="loading"
        @click="queryClick"
      >查询</el-button>
      <el-button size="small" @click="resetClick">重置</el-button>
    </el-row>
    <div ref="mainCtn" :style="{ width: ctnWidth }" class="main">
      <div
        id="wrapperCtn"
        class="wrapper"
        :style="{ width: wrapperWidth + 'px' }"
      >
        <div class="platform">
          <img
            id="root-platform"
            class="img"
            src="@/assets/imgs/self-intelligence-ops/img_platform.png"
            alt=""
          />
          <div class="text">调度平台</div>
        </div>
        <div class="cloudVendors">
          <div
            v-for="(cloud, cloudIndex) in infos"
            :key="cloudIndex"
            class="cloudVendor"
            :style="{ width: cloudWidth + 'px' }"
          >
            <img
              :id="'cloud-' + cloud.cloudVendor"
              class="img"
              :src="getCloudProviderImgSrc(cloud.cloudVendor)"
              alt=""
            />
            <div class="regions">
              <template
                v-for="(region, regionIndex) in cloud.regionWithSvcInfoModel"
              >
                <div
                  :key="cloudIndex + '-' + regionIndex + '-region'"
                  class="region-text"
                >
                  <img
                    src="@/assets/imgs/self-intelligence-ops/icon_region.png"
                    alt=""
                  />
                  Region - {{ region.regionId }}
                </div>
                <div
                  :key="cloudIndex + '-' + regionIndex + '-clusters'"
                  class="clusters"
                >
                  <div
                    v-for="(
                      cluster, clusterIndex
                    ) in region.clusterMicroSvcModels"
                    :key="
                      cloudIndex +
                        '-' +
                        regionIndex +
                        '-' +
                        clusterIndex +
                        '-cluster'
                    "
                    class="cluster"
                  >
                    <div class="clusterName">{{ cluster.k8sClusterName }}</div>
                    <div class="svcs">
                      <div
                        v-for="(svc, svcIndex) in cluster.svcModels"
                        :key="svcIndex"
                        class="svc-item"
                        @click="svcClick(svc)"
                      >
                        <div class="svc-img">
                          <img
                            class="icon"
                            :src="
                              svc.svcAlarm === '紧急'
                                ? require('@/assets/imgs/self-intelligence-ops/img_svc_urgent.png')
                                : svc.svcAlarm === '重要'
                                  ? require('@/assets/imgs/self-intelligence-ops/img_svc_major.png')
                                  : svc.svcAlarm === '次要'
                                    ? require('@/assets/imgs/self-intelligence-ops/img_svc_secondary.png')
                                    : svc.svcAlarm === '提示'
                                      ? require('@/assets/imgs/self-intelligence-ops/img_svc_prompt.png')
                                      : require('@/assets/imgs/self-intelligence-ops/img_svc_default.png')
                            "
                            alt=""
                          />
                          <div v-if="svc.svcAlarm" class="cover">
                            <div
                              class="dot"
                              :style="{
                                background:
                                  svc.svcAlarm === '紧急'
                                    ? '#F66173'
                                    : svc.svcAlarm === '重要'
                                      ? '#F7B500'
                                      : svc.svcAlarm === '次要'
                                        ? '#6DD400'
                                        : '#027DEC',
                              }"
                            ></div>
                          </div>
                        </div>
                        <div class="svc-name" :title="svc.microServiceName">
                          {{ svc.microServiceName }}
                        </div>
                      </div>
                    </div>
                    <div class="svc-divider"></div>
                    <div class="nodes">
                      <div
                        v-for="(node, nodeIndex) in cluster.nodeModels"
                        :key="nodeIndex"
                        class="node-item"
                      >
                        <div class="node-img">
                          <img
                            class="icon"
                            :src="
                              String(node.nodeHardware).toUpperCase() === 'CPU'
                                ? require('@/assets/imgs/self-intelligence-ops/img_node_cpu.png')
                                : require('@/assets/imgs/self-intelligence-ops/img_node_gpu.png')
                            "
                            alt=""
                          />
                        </div>
                        <div class="node-name" :title="node.nodeName">
                          {{ node.nodeName }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>

    <SvcDetailDrawer :show.sync="showSvcDetail" :info="svcDetailInfo" />
  </div>
</template>

<script>
import {
  getAllCloudVendors,
  getAllUseRegion,
  getAllUseZone,
  getAllClusterName,
  getAllMicroSvcName,
  getClusterMicroSvcInfos
} from '@/api/cnap/self-intelligence-ops'
import { getClusterProviderChn, getCloudProviderImg } from '@/utils/cnap/constant'
import SvcDetailDrawer from './SvcDetailDrawer'

export default {
  name: 'DiagnoseDetail',
  components: {
    SvcDetailDrawer
  },
  data() {
    return {
      ctnWidth: 'calc(100vw - 320px - 17.7vw)',
      loading: false,
      cloudVendor: '', // 云商
      cloudVendorOptions: [], // 选项
      cloudVendorLoading: false, // 加载中
      regionId: '', // 区域
      regionIdOptions: [], // 选项
      regionIdLoading: false, // 加载中
      zoneId: '', // 可用区
      zoneIdOptions: [], // 选项
      zoneIdLoading: false, // 加载中
      clusterName: '', // 集群
      clusterNameOptions: [], // 选项
      clusterNameLoading: false, // 加载中
      microSvcName: '', // 微服务
      microSvcNameOptions: [], // 选项
      microSvcNameLoading: false, // 加载中
      infos: [], // 所有信息
      wrapperWidth: 1200,
      cloudWidth: 400,
      jsPlumb: null, // 缓存实例化的jsplumb对象
      svcDetailInfo: {}, // 详情信息
      showSvcDetail: false
    }
  },
  computed: {
    /**
     * @description: 侧边栏配置
     * @return {*}
     */
    sidebar() {
      return this.$store.state.app.sidebar
    }
  },
  created() {},
  mounted() {
    this.initData()
  },
  methods: {
    /**
     * @description: 微服务点击
     * @param {*} svc
     * @return {*}
     */
    svcClick(svc) {
      this.svcDetailInfo = svc
      this.showSvcDetail = true
    },
    /**
     * @description: 获取云商图标
     * @param {*} key
     * @return {*}
     */
    getCloudProviderImgSrc(key) {
      return getCloudProviderImg(
        this.$store.state.app.cloudVendors,
        key,
        'mini'
      )
    },
    /**
     * @description: 画线
     * @return {*}
     */
    drawLines() {
      this.jsPlumb && this.jsPlumb.deleteEveryConnection() // 删除连线
      this.jsPlumb = this.$jsPlumb.getInstance({
        Container: 'wrapperCtn', // 选择器id
        Anchor: ['Bottom', 'Top', 'Left', 'Right'],
        Endpoint: 'Blank',
        PaintStyle: { stroke: '#027DEC', strokeWidth: 2 }, // 连线样式
        ConnectionOverlays: [
          [
            'Arrow',
            {
              location: 1,
              width: 8,
              length: 10,
              paintStyle: {
                stroke: '#027DEC',
                fill: '#027DEC',
                strokeWidth: 10
              }
            }
          ]
        ], // 箭头
        Connector: ['Straight']
      })
      this.infos.forEach((element, index) => {
        let sourceAnchor = 'Bottom'
        if (this.infos.length > 2) {
          sourceAnchor =
            index === 0
              ? 'Left'
              : index === this.infos.length - 1
                ? 'Right'
                : 'Bottom'
        }
        // 画线
        this.jsPlumb.connect({
          source: 'root-platform',
          target: 'cloud-' + element.cloudVendor,
          anchors: [sourceAnchor, 'Top']
        })
      })
    },
    /**
     * @description: 计算云商宽度
     * @return {*}
     */
    computedWidthAndDrawLines() {
      const mainWidth = this.$refs.mainCtn.clientWidth
      if (mainWidth > 900) {
        this.cloudWidth = Math.floor(mainWidth / 3)
      } else {
        this.cloudWidth = 300
      }
      this.wrapperWidth = Math.max(
        mainWidth,
        this.cloudWidth * this.infos.length
      )
      this.$nextTick(() => {
        this.drawLines()
      })
    },
    /**
     * @description: 云商查询
     * @param {*}
     * @return {*}
     */
    cloudVendorsQuery() {
      this.cloudVendorLoading = true
      getAllCloudVendors()
        .then((res) => {
          if (Array.isArray(res.data)) {
            this.cloudVendorOptions = res.data.map((item) => {
              return {
                value: item,
                label: getClusterProviderChn(
                  this.$store.state.app.cloudVendors,
                  item
                )
              }
            })
          }
        })
        .finally(() => {
          this.cloudVendorLoading = false
        })
    },
    /**
     * @description: 云商变化
     * @param {*} val
     * @return {*}
     */
    cloudVendorChange(val) {
      this.regionId = ''
      this.regionIdOptions = []
      this.regionIdRemoteQuery('') // 区域重新查询
      this.zoneId = ''
      this.zoneIdOptions = []
      this.zoneIdRemoteQuery('') // 可用区重新查询
      this.clusterName = ''
      this.clusterNameOptions = []
      this.clusterNameRemoteQuery('') // 集群重新查询
      this.microSvcName = ''
      this.microSvcNameOptions = []
      this.microSvcNameRemoteQuery('') // 微服务重新查询
    },
    /**
     * @description: 区域查询
     * @param {*} query
     * @return {*}
     */
    regionIdRemoteQuery(query) {
      this.regionIdLoading = true
      getAllUseRegion({
        cloudVendor: this.cloudVendor,
        regionId: query
      })
        .then((res) => {
          this.regionIdOptions = Array.isArray(res.data)
            ? res.data.slice(0, Math.min(res.data.length, 100))
            : []
        })
        .finally(() => {
          this.regionIdLoading = false
        })
    },
    /**
     * @description: 查找options中相应字段值
     * @param {*} options
     * @param {*} findStr 用来查找的字符
     * @param {*} findKey 查找字符对应的key
     * @param {*} resultKey 结果对应的key
     * @return {*}
     */
    findValInOptions(options, findStr, findKey, resultKey) {
      const findOp = options.find((item) => {
        return item[findKey] === findStr
      })
      return findOp && findOp[resultKey] ? findOp[resultKey] : ''
    },
    /**
     * @description: 区域变化
     * @param {*} val
     * @return {*}
     */
    regionIdChange(val) {
      // 自动选择云商
      this.cloudVendor = this.findValInOptions(
        this.regionIdOptions,
        val,
        'regionId',
        'cloudVendor'
      )
      this.zoneId = ''
      this.zoneIdOptions = []
      this.zoneIdRemoteQuery('') // 可用区重新查询
      this.clusterName = ''
      this.clusterNameOptions = []
      this.clusterNameRemoteQuery('') // 集群重新查询
      this.microSvcName = ''
      this.microSvcNameOptions = []
      this.microSvcNameRemoteQuery('') // 微服务重新查询
    },
    /**
     * @description: 可用区查询
     * @param {*} query
     * @return {*}
     */
    zoneIdRemoteQuery(query) {
      this.zoneIdLoading = true
      getAllUseZone({
        cloudVendor: this.cloudVendor,
        regionId: this.regionId,
        zoneId: query
      })
        .then((res) => {
          this.zoneIdOptions = Array.isArray(res.data)
            ? res.data.slice(0, Math.min(res.data.length, 100))
            : []
        })
        .finally(() => {
          this.zoneIdLoading = false
        })
    },
    /**
     * @description: 可用区变化
     * @param {*} val
     * @return {*}
     */
    zoneIdChange(val) {
      // 自动选择云商
      this.cloudVendor = this.findValInOptions(
        this.zoneIdOptions,
        val,
        'zoneId',
        'cloudVendor'
      )
      // 自动选择区域
      this.regionId = this.findValInOptions(
        this.zoneIdOptions,
        val,
        'zoneId',
        'regionId'
      )
      this.clusterName = ''
      this.clusterNameOptions = []
      this.clusterNameRemoteQuery('') // 集群重新查询
      this.microSvcName = ''
      this.microSvcNameOptions = []
      this.microSvcNameRemoteQuery('') // 微服务重新查询
    },
    /**
     * @description: 集群查询
     * @param {*} query
     * @return {*}
     */
    clusterNameRemoteQuery(query) {
      this.clusterNameLoading = true
      getAllClusterName({
        cloudVendor: this.cloudVendor,
        regionId: this.regionId,
        zoneId: this.zoneId,
        clusterName: query
      })
        .then((res) => {
          this.clusterNameOptions = Array.isArray(res.data)
            ? res.data.slice(0, Math.min(res.data.length, 100))
            : []
        })
        .finally(() => {
          this.clusterNameLoading = false
        })
    },
    /**
     * @description: 集群变化
     * @param {*} val
     * @return {*}
     */
    clusterNameChange(val) {
      // 自动选择云商
      this.cloudVendor = this.findValInOptions(
        this.clusterNameOptions,
        val,
        'k8sClusterName',
        'cloudVendor'
      )
      // 自动选择区域
      this.regionId = this.findValInOptions(
        this.clusterNameOptions,
        val,
        'k8sClusterName',
        'regionId'
      )
      // 自动选择可用区
      this.zoneId = this.findValInOptions(
        this.clusterNameOptions,
        val,
        'k8sClusterName',
        'zoneId'
      )
      this.microSvcName = ''
      this.microSvcNameOptions = []
      this.microSvcNameRemoteQuery('') // 微服务重新查询
    },
    /**
     * @description: 微服务查询
     * @param {*} query
     * @return {*}
     */
    microSvcNameRemoteQuery(query) {
      this.microSvcNameLoading = true
      getAllMicroSvcName({
        cloudVendor: this.cloudVendor,
        regionId: this.regionId,
        zoneId: this.zoneId,
        clusterName: this.clusterName,
        microSvcName: query
      })
        .then((res) => {
          this.microSvcNameOptions = Array.isArray(res.data)
            ? res.data.slice(0, Math.min(res.data.length, 100))
            : []
        })
        .finally(() => {
          this.microSvcNameLoading = false
        })
    },
    /**
     * @description: 微服务变化
     * @param {*} val
     * @return {*}
     */
    microSvcNameChange(val) {
      // 自动选择云商
      this.cloudVendor = this.findValInOptions(
        this.microSvcNameOptions,
        val,
        'microServiceName',
        'cloudVendor'
      )
      // 自动选择区域
      this.regionId = this.findValInOptions(
        this.microSvcNameOptions,
        val,
        'microServiceName',
        'regionId'
      )
      // 自动选择可用区
      this.zoneId = this.findValInOptions(
        this.microSvcNameOptions,
        val,
        'microServiceName',
        'zoneId'
      )
      // 自动选择集群
      this.clusterName = this.findValInOptions(
        this.microSvcNameOptions,
        val,
        'microServiceName',
        'k8sClusterName'
      )
    },
    /**
     * @description: 搜索
     * @return {*}
     */
    queryClick() {
      this.loading = true
      this.getInfosData()
    },
    /**
     * @description: 重置搜索框
     * @return {*}
     */
    resetClick() {
      this.cloudVendor = ''
      this.cloudVendorOptions = []
      this.cloudVendorsQuery() // 云商重新查询
      this.regionId = ''
      this.regionIdOptions = []
      this.regionIdRemoteQuery('') // 区域重新查询
      this.zoneId = ''
      this.zoneIdOptions = []
      this.zoneIdRemoteQuery('') // 可用区重新查询
      this.clusterName = ''
      this.clusterNameOptions = []
      this.clusterNameRemoteQuery('') // 集群重新查询
      this.microSvcName = ''
      this.microSvcNameOptions = []
      this.microSvcNameRemoteQuery('') // 微服务重新查询
      this.loading = true
      this.getInfosData()
    },
    /**
     * @description:
     * @return {*}
     */
    getInfosData() {
      getClusterMicroSvcInfos({
        cloudVendor: this.cloudVendor,
        regionId: this.regionId,
        zoneId: this.zoneId,
        clusterName: this.clusterName,
        microSvcName: this.microSvcName
      })
        .then((res) => {
          this.infos = Array.isArray(res.data) ? res.data : []
          this.computedWidthAndDrawLines()
        })
        .finally(() => {
          this.loading = false
        })
    },
    /**
     * @description: 初始化数据
     * @return {*}
     */
    initData() {
      this.ctnWidth = this.sidebar.opened
        ? 'calc(100vw - 320px - 17.7vw)'
        : 'calc(100vw - 114px - 17.7vw)'
      this.resetClick()
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.diagnose-detail-ctn {
  .top {
    overflow-y: auto;
    width: calc(100vw - 320px - 17.7vw);
    padding: 24px 25px;
    background: #ffffff;
    box-shadow: 0px 0px 5px 0px rgba(217, 213, 234, 0.5);
    border-radius: 4px;
    &::-webkit-scrollbar {
      height: 10px;
    }
    &::-webkit-scrollbar-track-piece {
      background: #f3f3f3;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background: #cccccc;
    }

    .name {
      .textStyle(14px, 400, #4a4a4a);
      line-height: 20px;
      flex-shrink: 0;
    }
  }

  .main {
    margin-top: 20px;
    width: calc(100vw - 320px - 17.7vw);
    height: calc(100vh - 190px);
    background: #ffffff;
    box-shadow: 0px 0px 5px 0px rgba(217, 213, 234, 0.5);
    border-radius: 4px;
    overflow-x: auto;
    &::-webkit-scrollbar {
      height: 10px;
    }
    &::-webkit-scrollbar-track-piece {
      background: #f3f3f3;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background: #cccccc;
    }

    .wrapper {
      width: 100%;
      height: 100%;
      position: relative;

      .platform {
        text-align: center;
        padding-top: 15px;
        .img {
          width: 75px;
          height: 75px;
        }
        .text {
          margin-top: 5px;
          .textStyle(14px, 400, #C3C3C3);
          line-height: 20px;
        }
      }

      .cloudVendors {
        margin-top: 7vh;
        display: flex;
        justify-content: center;
        .cloudVendor {
          flex-shrink: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          .img {
            height: 50px;
            margin-bottom: 20px;
          }
          .regions {
            width: 100%;
            height: calc(100vh - 395px - 7vh);
            overflow-y: auto;
            border-right: 1px solid #f2f2f2;
            box-sizing: border-box;

            &::-webkit-scrollbar {
              width: 5px;
            }
            &::-webkit-scrollbar-track-piece {
              background: #f3f3f3;
            }
            &::-webkit-scrollbar-thumb {
              border-radius: 5px;
              background: #cccccc;
            }
            .region-text {
              height: 44px;
              line-height: 44px;
              background: linear-gradient(90deg, #ffedbb 0%, #fff2cd 100%);
              .textStyle(16px, 600, #4a4a4a);

              img {
                margin: 11px 10px 11px 20px;
                float: left;
                width: 22px;
                height: 22px;
              }
            }
            .clusters {
              padding: 15px 20px;
              .cluster {
                margin-top: 15px;
                padding: 15px 20px;
                background: #fefeff;
                border-radius: 4px;
                border: 1px solid #ececec;
                &:first-child {
                  margin-top: 0;
                }
                .clusterName {
                  .textStyle(16px, 600, #4a4a4a);
                  line-height: 22px;
                }
                .svcs {
                  margin-top: 10px;
                  display: grid;
                  grid-template-columns: 1fr 1fr 1fr 1fr;
                  grid-template-rows: auto;
                  grid-column-gap: 1vw;
                  grid-row-gap: 0.5vw;

                  .svc-item {
                    // overflow: hidden;
                    cursor: pointer;
                    min-width: 0;
                    box-sizing: border-box;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    line-height: 0;
                    .svc-img {
                      text-align: center;
                      position: relative;
                      .icon {
                        width: 80%;
                      }
                      .cover {
                        position: absolute;
                        top: 0;
                        bottom: 0;
                        left: 10%;
                        right: 10%;
                        border-radius: 50%;
                        // background: red;
                        animation: svcDotRotate 5s linear infinite;
                        .dot {
                          width: 8px;
                          height: 8px;
                          border-radius: 50%;
                          position: absolute;
                          left: 50%;
                          top: 0;
                          transform: translate(-50%, -50%);
                          background: #6dd400;
                        }
                        @keyframes svcDotRotate {
                          0% {
                            transform: rotate(0);
                          }
                          100% {
                            transform: rotate(360deg);
                          }
                        }
                      }
                    }
                    .svc-name {
                      margin-top: 5px;
                      width: 100%;
                      .textStyle(12px, 400, #868686);
                      line-height: 17px;
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      text-align: center;
                    }
                  }
                }
                .svc-divider {
                  height: 1px;
                  background-color: #f2f2f2;
                  margin: 15px 0;
                }
                .nodes {
                  display: grid;
                  grid-template-columns: 1fr 1fr 1fr 1fr;
                  grid-template-rows: auto;
                  grid-column-gap: 1vw;
                  grid-row-gap: 0.5vw;
                  .node-item {
                    overflow: hidden;
                    box-sizing: border-box;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    line-height: 0;
                    .node-img {
                      text-align: center;
                      .icon {
                        width: 90%;
                      }
                    }
                    .node-name {
                      margin-top: 5px;
                      width: 100%;
                      .textStyle(12px, 400, #868686);
                      line-height: 17px;
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      text-align: center;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
